import React from 'react'
export class Header extends React.Component {
  state = {
    val: ''
  }
  render() {
    // const { listAdd } = this.props
    return (
      <>
        <header className='header'>
          <h1>todos</h1>
          <input value={this.state.val} onKeyDown={this.keyEnter} onChange={this.publish} className='new-todo' placeholder='What needs to be done?' autoFocus />
        </header>
      </>
    )
  }
  publish = (e) => {
    this.setState({
      val: e.target.value
    })
  }
  keyEnter = (e) => {
    if (e.key === 'Enter' && this.state.val.trim()) {
      console.log(e);

      this.props.listAdd(this.state.val)
      this.setState({
        val: ''
      })
    }
    if (e.key === 'Escape') {
      this.setState({
        val: ''
      })
    }
  }
}
